<h1 mat-dialog-title>{{ options.title }}</h1>
<div mat-dialog-content id="confirm-msg">
  <div class="message-content">
    <span [innerHTML]="options.message"></span>
  </div>

  @if (options.secondaryCheckbox) {
    <span>
      <mat-checkbox
        color="primary"
        class="confirm-checkbox secondary-checkbox"
        ixTest="secondary-confirmation"
        [(ngModel)]="isSecondaryCheckboxChecked"
      >
        <span id="confirm-label">{{ options.secondaryCheckboxText }}</span>
      </mat-checkbox>
    </span>
  }
</div>

<ix-form-actions mat-dialog-actions class="form-actions">
  @if (!options.hideCheckbox && options.confirmationCheckboxText) {
    <mat-checkbox
      color="primary"
      name="confirm_checkbox"
      class="confirm-checkbox"
      ixTest="confirm"
      (change)="toggleSubmit($event)"
    >
      {{ options.confirmationCheckboxText }}
    </mat-checkbox>
  }
  @if (!options.hideCancel && options.cancelText) {
    <button
      mat-button
      name="cancel_button"
      class="mat-mdc-button mat-button mat-accent cancel-button"
      ixTest="dialog-cancel"
      (click)="onCancel()"
    >
      {{ options.cancelText }}
    </button>
  }
  @if (options.buttonText) {
    <button
      mat-button
      name="ok_button"
      class="mat-mdc-button mat-button mat-primary submit-button"
      ixTest="dialog-confirm"
      [disabled]="isDisabled()"
      [color]="options.buttonColor || 'primary'"
      (click)="onSubmit()"
    >
      {{ options.buttonText }}
    </button>
  }
</ix-form-actions>
